<template>
  <el-descriptions ref="ruleFormRef" :column="2" direction="vertical" v-loading="isLoading">

    <el-descriptions-item width="50%" :label='titles.projectId'>
      {{ isNullOrEmpty( formInline?.projectName ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label='titles.buildingName'>
      {{ isNullOrEmpty( formInline?.buildingName ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label='titles.upFloors'>
      {{ isNullOrEmpty( formInline?.upFloors ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label='titles.downFloors'>
      {{ isNullOrEmpty( formInline?.downFloors ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label='titles.drawingPoint'>
      <!-- {{ isNullOrEmpty( formInline?.drawingPoint ) }} -->
      <el-button type="primary" @click="openDrawingPoints">图纸标记</el-button>
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label='titles.markPoint'>
      <!-- {{ isNullOrEmpty( formInline?.markPoint ) }} -->
      <el-button type="primary" @click="edit">地图标记</el-button>
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label='titles.remark'>
      {{ isNullOrEmpty( formInline?.remark ) }}
    </el-descriptions-item> </el-descriptions>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { getInfo as settingInfo } from "@/api/operate/project-management/projectManagement/setting";
import { ref } from "vue";
import { titles } from './index';
import { addDialog } from "@/components/ReDialog";
import SjMap from "@/components/mapForm/map.vue"
import { usePageVariablesStoreHook } from '@/store/modules/pageVariables'
import { allPoints } from '@/api/operate/project-management/projectManagement/architectural-settings/index';
import type { infoType } from '@/api/operate/project-management/projectManagement/architectural-settings/index';
import { deviceDetection } from "@pureadmin/utils";
import drawingPoints from './drawingPoints.vue'
import {usePoints} from "@/common/points";
const operate = usePageVariablesStoreHook().getOperate()
type FormProps = {
  formInline: infoType,
  isLoading: boolean
}
 
const drawingPointsRefs = ref()
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({} as infoType),
  isLoading: false
});


const ruleFormRef = ref();
const showInfo = ref();
const formRef = ref();
const labelMarkers = ref() //已经标记过的点位
const formState = reactive({
  center: [],
  drawingPoint:{}
})
onMounted(() => {
  getSettinginfo()
})
const edit = () => {
  showInfo.value = {}
  openDialog("")
}
const bgImg = ref()
const getSettinginfo = () => {
  settingInfo().then(res => {
    if (res.code == 200) {
      bgImg.value = res.result.projectPlan
    }
  })
}

//图纸标记详情
const openDrawingPoints = () => {
  
  let changeMarker = []
  const dp = props.formInline.drawingPoint
 
  if(Object.keys(dp).length > 2 && dp.lat !== '' && dp.lng !== '') {
    changeMarker = [dp]
    // console.log("获取props.dp:", changeMarker);
  }
  addDialog({
    title: `图纸标点`,
    width: "1100px",
    draggable: true,
    hideFooter: true,
    props: {
      isShowPopup: false,
      changeMarker: changeMarker, //添加，修改的标点
      markerArr: [], //已经添加过的标点
      bgImg: bgImg.value
    },
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    open:( {options,index}) => {
      //获取已经标记过的点位
      usePoints("building").getMarkerPoints(true,changeMarker).then(res => {
        drawingPointsRefs.value.setFixedMarkers(res)
      })
    },
    contentRenderer: () => h(drawingPoints, {
      ref: drawingPointsRefs,
      "onUpdate:changeMarker": (val) => {
        formState.drawingPoint = val[0]
      }
    }),
  })


}
const openDialog = (title = "项目编辑") => {
  formState.center = [props.formInline.markPoint.lng, props.formInline.markPoint.lat]
  addDialog({
    title: '地图标记',
    width: "800px",
    draggable: true,
    hideFooter: true,
    props: {
      center: [],
      isEdit: false,
      showCreatePoly: false,
      labelMarkers: labelMarkers.value
      // area:formState.area
    },
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    open:( {options,index}) => {
      //获取已经标记过的点位
      usePoints("building").getMapPoints(operate.checkedProject, false).then(res => {
        formRef.value.setLabelMarkers(res)
      })
    },
    contentRenderer: () => h(SjMap, {
      ref: formRef,
      "onUpdate:center": (val) => {
        formState.center = val
      },
    }),

  })
}
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
